<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-dialog"
		:class="_classes"
		:style="_styles"
	>
		<pure-overlay
			:show="show"
			:transparent="!mask"
			@onClick="_handleMaskClick"
			@onStatusChange="_handleStatusChange"
		>
			<view
				class="pure-dialog__container"
				@tap.stop
				@click.stop
			>
				<!-- Header -->
				<view
					class="pure-dialog__header"
					v-if="title || $slots.title"
				>
					<!-- Title -->
					<slot name="title">
						<view class="pure-dialog__title">
							{{ title }}
						</view>
					</slot>
				</view>

				<!-- Close -->
				<view
					class="pure-dialog__close"
					v-if="showClose"
					@tap="$emit('onClose')"
					:hover-class="hoverClass"
				>
					<slot name="close">
						<pure-icon :name="closeIconName"></pure-icon>
					</slot>
				</view>

				<!-- Top -->
				<view class="pure-dialog__top">
					<slot name="content-top"> </slot>
				</view>

				<!-- Body -->
				<view class="pure-dialog__body">
					<scroll-view
						class="pure-dialog__scroll-view"
						:scroll-y="scrollable"
					>
						<view class="pure-dialog__content">
							<slot></slot>
						</view>
					</scroll-view>
				</view>

				<!-- Bottom -->
				<view class="pure-dialog__bottom">
					<slot name="content-bottom"> </slot>
				</view>

				<!-- Footer	 -->
				<view
					class="pure-dialog__footer"
					v-if="_isFooter"
				>
					<slot name="footer">
						<view
							class="pure-dialog__footer__button pure-dialog__footer__button--cancel"
							v-if="cancel || $slots.cancel"
						>
							<slot name="cancel">
								<pure-button
									:text="cancelText"
									:theme="cancelTheme"
									link
									v-bind="cancelOpts"
									@onClick="$emit('onCancel')"
								></pure-button>
							</slot>
						</view>
						<view
							class="pure-dialog__line pure-dialog__line--button"
							v-if="buttonLine"
						></view>
						<view
							class="pure-dialog__footer__button pure-dialog__footer__button--confirm"
							v-if="confirm || $slots.confirm"
						>
							<slot name="confirm">
								<pure-button
									:text="confirmText"
									:theme="confirmTheme"
									link
									v-bind="confirmOpts"
									@onClick="$emit('onConfirm')"
								></pure-button>
							</slot>
						</view>
					</slot>
				</view>

				<!-- absolute 元素 -->
				<slot name="absolute"></slot>
			</view>
		</pure-overlay>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options.js";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, useSlots } from "vue";
	import props from "./props";

	// 状态
	const _status = ref("");

	// -------------------------------------------------------------------------------- Slots
	const _slots = useSlots();

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClose", "onConfirm", "onCancel"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 状态
		array.push(`pure-dialog--${_status.value}`);

		// 无 Footer
		if (!_isFooter.value) array.push(`pure-dialog--not-footer`);

		// Header Line
		if (_props?.headerLine) array.push(`pure-dialog--header-line`);

		// Footer Line
		if (_props?.footerLine) array.push(`pure-dialog--footer-line`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 宽度
		if (_props?.width) array.push(`--pure-dialog-width: ${_props.width}`);

		// 高度
		if (_props?.height) array.push(`--pure-dialog-height: ${_props.width}`);

		// 最大宽度
		if (_props?.maxWidth) array.push(`--pure-dialog-max-width: ${_props.maxWidth}`);

		// 最大高度
		if (_props?.maxHeight) array.push(`--pure-dialog-max-height: ${_props.maxHeight}`);

		return array;
	});

	// 是否显示 Footer
	const _isFooter = computed(() => {
		if (_props?.cancel) return true;
		if (_props?.confirm) return true;
		if (_slots?.footer) return true;
		if (_slots?.cancel) return true;
		if (_slots?.confirm) return true;
		return false;
	});

	// 遮罩层点击事件
	function _handleMaskClick() {
		if (_props?.mask && _props.maskClickable) {
			_emits("onClose");
		}
	}

	// 状态变化事件
	function _handleStatusChange(status) {
		_status.value = status;
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
